import React, {useEffect, useState} from "react";
import {Dimensions, StyleSheet, Text, TouchableHighlight, View} from "react-native";
import {copySvgXml, infoSvgXml, shareSvgXml} from "../libs/svgXml";
import {SvgXml} from "react-native-svg";
import {fontSize_14, fontSize_15} from "./theme";
import QRCode from "react-native-qrcode-svg";
import {getChainBaseByChainID, nowWallet} from "./smartxL2Libs/L2_Data";
import {setCopyMsg} from "../libs/utils";

const {width,height,scale} = Dimensions.get("window");

const L2_Receive = ({navigation,route}:any) => {
    const [address,setAddress] = useState(route?.params?.address);
    const [tipText,setTipText] = useState(route?.params?.tipText || "SL2/SL220");
    useEffect(()=>{
        navigation.setOptions({
            title:"收款",
        })
        // setAddress(getAddress)
        initTipText();
    },[])
    const initTipText = async () => {
        let net = await getChainBaseByChainID(nowWallet.chainID);
        setTipText(net?.tipText || "SL2/SL220")
    }

    return (
        <View style={styles.container}>
            <View style={styles.mainContainer}>
                <View style={styles.topContainer}>
                    <View style={styles.TipContainer}>
                        <SvgXml xml={infoSvgXml()} width={20} height={20}/>
                        <Text style={styles.TipText}>仅向该地址转入{tipText}代币的相关资产</Text>
                    </View>
                    <View style={styles.QRcodeContainer}>
                        <View style={{padding:10,backgroundColor:"white"}}>
                            <QRCode value={address}  size={190} />
                        </View>
                    </View>
                </View>
                <View style={styles.bottomContainer}>
                    <View style={styles.infoContainer}>
                        <Text style={{color:"#b9babc",fontSize:fontSize_14}}>收款地址</Text>
                        <Text style={{fontSize:fontSize_15,color:"black",marginTop:5,textAlign:"center"}}>{address}</Text>
                    </View>
                    <View style={styles.Share_Copy}>
                            <TouchableHighlight
                                underlayColor={"white"}
                                onPress={() => {
                                    console.log('分享')
                                }}
                                style={{flex: 1}}
                            >
                                <View style={{
                                    alignItems: "center",
                                    justifyContent: "center",
                                    flex: 1,
                                    flexDirection: "row"
                                }}>
                                    <SvgXml xml={shareSvgXml} width={15} height={15} style={{marginRight: 5}}/>
                                    <Text style={{textAlignVertical: "center",fontSize:fontSize_15}}>
                                        分享
                                    </Text>
                                </View>
                            </TouchableHighlight>
                            <View style={{height: 20, width: 1, backgroundColor: "#f5f5f5"}}/>
                            <TouchableHighlight
                                underlayColor={"white"}
                                onPress={() => {
                                    setCopyMsg(address)
                                }}
                                style={{flex: 1}}
                            >
                                <View style={{
                                    alignItems: "center",
                                    justifyContent: "center",
                                    flex: 1,
                                    flexDirection: "row"
                                }}>
                                    <SvgXml xml={copySvgXml} width={15} height={15} style={{marginRight: 5}}/>
                                    <Text>
                                        复制
                                    </Text>
                                </View>
                            </TouchableHighlight>
                        </View>


                </View>
            </View>

        </View>
    )
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        width:width,
        alignItems: "center",
        flexDirection: "column",
        paddingLeft: 10,
        paddingRight: 10,
        backgroundColor:"#1f83fd"
    },
    mainContainer:{
        backgroundColor:"white",
        width:"100%",
        alignItems:"center",
        borderRadius:10
    },
    topContainer:{
        backgroundColor:"#f5f6f8",
        width:"100%",
        alignItems:"center",
        padding:20,
        borderTopLeftRadius:10,
        borderTopRightRadius:10,
    },
    TipContainer:{
        backgroundColor:"#fff5ec",
        flexDirection:"row",
        alignItems:"center",
        justifyContent:"center",
        paddingLeft:20,
        paddingRight:20,
        paddingTop:10,
        paddingBottom:10
    },
    TipText:{
        fontSize:fontSize_15,
        color:"#ec874b",
        flexWrap:"wrap",
        paddingLeft:15,
        fontWeight:"bold"
    },
    QRcodeContainer:{
        padding:10,
        marginTop:20,
        marginBottom:10,
        backgroundColor:"#e8f0fa",
        borderRadius:20
    },
    bottomContainer:{
        width:"100%",
        minHeight:100,
        padding:25,
        backgroundColor:"white",
        borderBottomRightRadius:10,
        borderBottomLeftRadius:10,
        paddingBottom:0
    },
    infoContainer:{
        backgroundColor:"#f5f6f8",
        borderRadius:10,
        alignItems:"center",
        padding:20,
        paddingTop:10,
        paddingBottom:10
    },
    Share_Copy:{
        width: "100%",
        height: 70,
        flexDirection: "row",
        backgroundColor: "white",
        alignItems: "center"
    }

})
export default L2_Receive;


